<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-button type="primary" size="mini" @click="dialog = true">
        添加角色
      </el-button>
      <!-- 下面表格 -->

      <el-table :data="list" border stripe style="width: 100%">
        <el-table-column width="60" type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['rowbutton', item.id === 30 ? 'rowtop' : '', 'center']"
              v-for="item in scope.row.children"
              :key="item.id"
              closable
              @close="remove(scope.row, item.id)"
            >
              <!-- 一共24列 分成2列来使用 -->
              <el-col :span="5">
                <el-tag closable @close="remove(scope.row, item.id)">
                  {{ item.authName }}
                </el-tag>
                <i class="el-icon-circle-plus"></i>
              </el-col>

              <!-- 一级权限 -->
              <el-col :span="19">
                <el-row
                  v-for="item1 in item.children"
                  :key="item1.id"
                  :class="['rowtop', 'center']"
                >
                  <el-col :span="6">
                    <el-tag
                      closable
                      @close="remove(scope.row, item1.id)"
                      type="success"
                    >
                      {{ item1.authName }}
                    </el-tag>
                    <i class="el-icon-circle-plus"></i>
                  </el-col>
                  <el-col :span="13">
                    <el-tag
                      closable
                      @close="remove(scope.row, item2.id)"
                      type="warning"
                      v-for="item2 in item1.children"
                      :key="item2.id"
                    >
                      {{ item2.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
                <!-- 第二列放二级权限 -->
              </el-col>
              <!-- 二级三级权限 -->
            </el-row>
            <!--  <pre>{{ scope.row }}</pre>  -->
          </template>
        </el-table-column>

        <el-table-column type="index" prop="id" width="60"></el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="roleDesc"
          label="角色描述"
          width="300"
        ></el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              class="el-icon-edit"
              type="primary"
              size="small"
              @click="show(scope.row.id)"
            >
              编辑
            </el-button>
            <!-- 删除 -->
            <el-button
              size="small"
              type="danger"
              class="el-icon-delete"
              @click="open(scope.row.id)"
            >
              删除
            </el-button>
            <!-- 权限分配 -->
            <el-button
              size="small"
              type="warning"
              class="el-icon-share"
              @click="privileges(scope.row)"
            >
              分配权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分配权限弹出框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="treestructure"
      width="50%"
      @close="setclosed"
    >
      <!-- 树形结构 -->
      <el-tree
        :data="allocation"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-expanded-keys="arrow"
        :props="treeProps"
        ref="tree"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treestructure = false">取 消</el-button>
        <el-button type="primary" @click="allot">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹出框 -->
    
    <el-dialog title="编辑角色" :visible.sync="dialogVisible" width="40%">
      <el-form  :model="messageq" >
  <el-form-item label="角色名称" :label-width="formLabelWidth"  >
          <el-input v-model="messageq.roleName" ref="jsmc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input  v-model="messageq.roleDesc"  ref="jsms" autocomplete="off"></el-input>
        </el-form-item>
</el-form>



      

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="transitional">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加分类这招层 -->

    <el-dialog title="添加角色" :visible.sync="dialog" width="40%">
      <el-form>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="charactername" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input v-model="characters" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="verification">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除弹出框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      reid: null,
      /* 编辑弹出框内容 */
      messageq:{},/* 每个角色的信息情况 */
      charactername: '' /* 添加角色名称 */,
      characters: '', //角色描述
      list: [],
      compile: false, //编辑控制弹出框
      dialogVisible: false,
      formLabelWidth: '100px',
      treestructure: false /* 控制权限弹出框 */,
      allocation: [] /* 权限数据 */,
      treeProps: {
        /* 树形对象空间的绑定对象 */ children: 'children',
        label: 'authName'
      },
      arrow: [],
      id: '' /* 快分配权限的id */
    }
  },
  methods: {
    /* 添加分类 */
    async verification() {
      if (this.charactername === '') {
        this.$message.info('角色名称不能是空')
        return
      }
      this.$message.info('添加成功')
      const res9 = await this.$http({
        url: 'roles',
        method: 'post',
        data: {
          roleName: this.charactername,
          roleDesc: this.characters
        }
      })
      //this.list=res9.data
      this.list.push(res9.data.data)
      //console.log(res9.data.data)
      this.characters = ''
      this.charactername = ''
      this.dialog = false
      this.getlist()
    },

    /* 删除权限 */
    async remove(row, id) {
      const res2 = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (res2 !== 'confirm') {
        return this.$message.info('删除了取消')
      }

      const res3 = await this.$http({
        url: `roles/${row.id}/rights/${id}`,
        method: 'delete'
      })
      //console.log(res3)

      row.children = res3.data.data
    },
    /* 编辑功能完成 */
    async transitional() {
    /*   if (this.charactername.trim() === '' && this.characters.trim() === '')
        return //this.$message.info('请输入内容')
 */
//console.log(this.$refs.jsms.value);
     /*  const res10 = await this.$http({
        url: `roles/${this.reid}`,
      }) */
      this.dialogVisible = false
      // this.list.unshift(res10.data.data) 
    /*   console.log(res10.data.data);
      this.messageq=res10.data.data */
    },
    async show(id) {
      
      //console.log(id)
      this.reid = id
      this.dialogVisible = true
       const res10 = await this.$http({
        url: `roles/${this.reid}`,
      })
      this.getlist()
        console.log(res10.data.data);
      this.messageq=res10.data.data
     
    },

    /* 分配权限 */
    async privileges(val) {
      this.id = val.id
      this.treestructure = true

      const res5 = await this.$http({
        url: 'rights/tree'
      })
      //this.allocation = res5.data.data
      this.allocation = [...this.allocation, ...res5.data.data]
      //console.log('权限数据', res5.data.data)
      this.recursion(val, this.arrow) /* 递归函数传值 */
    },
    /* 递归自己调用自己 获取角色下的三级列表权限的ID 并且保存到arrow数组中*/
    recursion(node, arr) {
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach((item) => {
        this.recursion(item, arr)
      })
    },
    setclosed() {
      this.arrow = []
    },
    async allot() {
      const keyss = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedNodes()
      ] /* 那半选 跟全选的id */
      //console.log('给副经理分配权限',keys);
      const idstr = keyss.join(',')
      const res8 = await this.$http({
        url: `roles/${this.id}/rights`,
        method: 'post',
        data: {
          rids: idstr
        }
      })
      //console.log(res8)
      this.getlist()
      this.treestructure = false
    },
    async getlist() {
      const res = await this.$http({
        url: 'roles'
      })
      //console.log(res)
      this.list = res.data.data
    },
    /* 删除 */

    async open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          const num = await this.$http({
            url: `roles/${id}`,
            method: 'delete'
          })
          this.getlist()
          console.log(num.data)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },

  created() {
    this.getlist()
  }
}
</script>

<style lang="less" scoped>
.el-button--medium {
  font-size: 20px;
  padding: 13px 25px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}
.el-card {
  box-shadow: 0 2px rgba(0, 0, 0, 0.5) !important;
}
.el-card .is-always-shadow {
  box-shadow: 0 2px rgba(0, 0, 0, 0) !important;
}
.el-card__body {
  border-right: 1px solid rgba(0, 0, 0, 1) !important;
}
.el-tag {
  margin: 20px;
}
.rowbutton {
  border-bottom: 1px solid #eee;
}
.rowtop {
  border-top: 1px solid #eee;
}
.center {
  display: flex;
  align-items: center;
}
</style>
